<template>
  <div class="dispatch-wrapper" :style="{ transform: `translate(${isToggle ? 330 : 0}px,0)` }">
    <!-- <img class="dispatch-bkg" :src="u153Svg" alt="" /> -->
    <!-- <n-input class="search-input" v-model:value="pattern" placeholder="搜索" /> -->
    <!-- input搜索框 -->
    <div class="inputSeach">
      <n-input placeholder="搜索">
        <template #suffix>
          <button class="buttonSeach"></button>
        </template>
      </n-input>
    </div>
    <!-- -------------------------------------- -->
    <div class="tree-wrapper">
      <!-- 三个按钮 -->
      <div class="tree-list">
        <!-- :style="{
          backgroundImage: `url(${index == selectTreeIndex ? u182Svg : u183Svg
            })`,}"  -->
        <div v-for="(item, index) in treeList" :class="[index == selectTreeIndex ? 'tree-list-item2' : 'tree-list-item']"
          @click="handleSelectChange(index)">
          {{ item.label }}
        </div>
      </div>

      <div class="tree-data-wrapper">
        <n-tree ref="TreeNode" block-line cascade :data="data" :default-expanded-keys="defaultExpandedKeys" checkable
          expand-on-click selectable :pattern="pattern" :show-irrelevant-nodes="true" />
      </div>

    </div>
    <!-- 底部按钮 -->
    <div class="bottom-wrapper">
      <!-- class="bottom-button" :style="{ backgroundImage: `url(${u187Svg})` }" -->
      <div @click="videoCallAll" class="bottom-button">
        视频群呼
      </div>
      <div
        @click="audioCallAll"
        class="bottom-button"
        :style="{ backgroundImage: `url(${u187Svg})` }"
      >
        语音会议
      </div>
      <div class="bottom-button">
        视频会商
      </div>
    </div>

    <div class="icon-button-wrapper">
      <n-icon @click="handleToggle" class="icon-button" :style="{ transform: `rotate(${isToggle ? 0 : 180}deg)` }"
        size="18px">
        <CaretBack></CaretBack>
      </n-icon>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, h } from "vue";
import u153Svg from "../../../assets/svg/u153.svg";
import u182Svg from "../../../assets/svg/u182.svg";
import u183Svg from "../../../assets/svg/u183.svg";
import u187Svg from "../../../assets/svg/u187.svg";
import { Call, Videocam } from "@vicons/ionicons5";
import { CaretBack } from "@vicons/ionicons5";
//@ts-ignore
import t01Sip from "t01Sip";
import {
  getOriginizationApi,
  getOriginizationUsersApi,
} from "../../../api/index";
import { useMainStore } from "@/store";
import { NIcon } from "naive-ui";
const TreeNode = ref();
const store = useMainStore();
onMounted(() => {
  getOrginization();
});
interface Tree {
  label: string;
  key: number;
  children?: Tree[];
  prefix?: Function;
  suffix?: Function;
}
const isToggle = ref(false);
const pattern = ref("");
const totalNum = ref(0);
const onlineNum = ref(0);
const handleNodeClick = (data: Tree) => {
  console.log(data);
};
const defaultProps = {
  children: "children",
  label: "label",
};
const defaultExpandedKeys = ref([0]);
const data = ref<Tree[]>([
  {
    label: "RHTX",
    key: 0,
    // prefix: () => h("div", {}, { default: () => "123" }),
    children: [],
  },
]);
const treeList = ref([
  {
    id: 0,
    label: "人员",
  },
  {
    id: 1,
    label: "通信设备",
  },
  {
    id: 2,
    label: "已选资源",
  },
]);
const selectTreeIndex = ref(0);
const handleToggle = () => {
  isToggle.value = !isToggle.value;
};
const handleSelectChange = (index: number) => {
  selectTreeIndex.value = index;
};

const getOrginization = () => {
  getOriginizationApi({
    yonghuid: "70000176",
    all: 1,
  }).then((res) => {
    console.log(res);
    data.value[0].label = res.data[0].UnitName;
    data.value[0].suffix = () =>
      h("div", {}, { default: () => `(${totalNum.value}/${onlineNum.value})` });
    getOriginizationUsers();
  });
};
const getOriginizationUsers = () => {
  getOriginizationUsersApi({ zip: "1", unitid: "120002", type: "2" }).then(
    (res) => {
      const filterData = res.data.filter((item) => item.UnitId == "120002");
      totalNum.value = filterData.length;
      onlineNum.value = filterData.filter(
        (item) => item.yonghuzxbj == 1
      ).length;
      data.value[0].children = res.data
        .filter((item) => item.UnitId == "120002")
        .map((item) => {
          return {
            label: item.yonghuname,
            key: item.yonghuid,
            disabled: item.yonghuzxbj != 1,
            prefix: () =>
              h(
                "div",
                { class: [item.yonghuzxbj == 1 ? "online" : "offline"] },
                { default: () => "" }
              ),
            suffix: () =>
              h(
                "div",
                { class: ["icons-wrapper"] },
                {
                  default: () => [
                    h(
                      NIcon,
                      {
                        class: ["tree-icon"],
                        onClick() {
                          call(item.yonghuid);
                        },
                      },
                      { default: () => h(Call) }
                    ),
                    h(
                      NIcon,
                      {
                        class: ["tree-icon"],
                        onClick() {
                          videoCall(item.yonghuid);
                        },
                      },
                      { default: () => h(Videocam) }
                    ),
                  ],
                }
              ),
          };
        });
    }
  );
};
const call = (phone: string) => {
  //@ts-ignore
  const ua = window.userAgent;
  t01Sip.call({
    userAgent: ua,
    callNumber: phone,
    callType: "audio",
  });
};
const videoCall = (phone: string) => {
  //@ts-ignore
  const ua = window.userAgent;
  t01Sip.call({
    userAgent: ua,
    callNumber: phone,
    callType: "video",
  });
};
const videoCallAll = () => {
  TreeNode.value.getCheckedData().keys.map((item) => {
    if (item != 0) {
      videoCall(item);
    }
  });
};
const audioCallAll = () => {
  TreeNode.value.getCheckedData().keys.map((item) => {
    if (item != 0) {
      call(item);
    }
  });
};
</script>
<style>
.online {
  width: 8px;
  height: 8px;
  background-color: rgb(34, 230, 57);
  border-radius: 50%;
}

.offline {
  width: 8px;
  height: 8px;
  background-color: rgba(85, 85, 85, 0.459);
  border-radius: 50%;
}

.n-tree-node-content__text {
  border-bottom: none !important;
}

.icons-wrapper {}

.tree-icon {
  margin-left: 0.5em;
}
</style>
<style lang="scss" scoped>
.dispatch-wrapper {
  z-index: 16;
  background-size: 100% 100%;
  width: 345px;
  height: 593px;
  box-sizing: border-box;
  padding: 15px;
  backdrop-filter: opacity(90%);
  transition: transform 0.3s ease;
  position: absolute;
  right: 10px;
  // background-color: rgba(36, 85, 132, 0.7);
  background-image: url("../../../assets/border/leftBorder.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border-radius: 4px;
  backdrop-filter: blur(4px);
  filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.3));

  // border: 1px solid red;
  // 搜索框
  .inputSeach {
    width: 100%;
    margin-bottom: 12px;

    .buttonSeach {
      width: 20px;
      height: 20px;
      // background-image: url("../../../");
      background-image: url("../../../assets/border/icon7.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      // background-color: #075D9CFF;
      background-color: transparent;
      padding: 3px 3px;
      outline: none;
      border: none;
      cursor: pointer;
    }
  }

  .dispatch-bkg {
    position: absolute;
    left: 0px;
    top: 0px;
    opacity: 0.8;
  }

  .search-input {
    width: 310px;
  }

  .icon-button-wrapper {
    padding: 5px;
    position: absolute;
    left: -5px;
    top: 50%;
    cursor: pointer;

    margin-top: -9px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 14;
  }

  .icon-button {}

  .icon-button-wrapper:hover {
    color: grey;
  }

  .icon-button-wrapper:active {
    color: #aaa;
  }

  .tree-wrapper {
    display: flex;
    // justify-content: space-between;
    position: relative;
    z-index: 11;
    // border: 1px solid rgb(21, 4, 212);
  }

  .tree-data-wrapper {
    height: 460px;
    overflow-y: scroll;
  }

  .tree-list {
    height: 460px;
    // border: 1px solid rgb(118, 199, 19);
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }

  .tree-list-item {
    width: 37px;
    height: 148px;
    background-size: 100% 100%;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    // color: #fff;
    cursor: pointer;
    font-size: 12px;
    background-image: url("../../../assets/border/blue.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    // border: 1px solid red;
    font-family: PingFang SC-Semibold, PingFang SC;
    color: #DDEDFF;
    letter-spacing: 8px;
  }

  .tree-list-item2 {
    width: 37px;
    height: 148px;
    background-size: 100% 100%;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    // color: #fff;
    cursor: pointer;
    font-size: 12px;
    background-image: url("../../../assets/border/blue2.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    // border: 1px solid red;
    font-family: PingFang SC-Semibold, PingFang SC;
    color: #FFF069;
    letter-spacing: 8px;

  }

  .bottom-wrapper {
    position: absolute;
    bottom: 20px;
    display: flex;
    justify-content: space-around;
    width: 298px;
    left: 50%;
    transform: translate(-50%, 0);
    // border: 1px solid red;

    .bottom-button {
      // border: 1px solid red;
      background-size: 100% 100%;
      padding: 5px 5px;
      cursor: pointer;

      width: 74px;
      height: 20px;
      line-height: 20px;

      background-image: url("../../../assets/border/button.png");
      background-repeat: no-repeat;
      // background-size: 100% 100%;
      // border: 1px solid red;
      font-size: 12px;
      text-align: center;
      font-family: PingFang SC-Regular, PingFang SC;
    }

    .bottom-button:hover {
      opacity: 0.8;
    }

    .bottom-button:active {
      opacity: 1;
      color: grey;
    }
  }
}

:deep(.n-input .n-input-wrapper) {
  background-color: rgba(57, 121, 170, .5);
}

@media (min-width: 1919px) {
  .dispatch-wrapper {
    height: 954px;
  }

  .tree-wrapper {
    height: 750px;
    // border: 1px solid red;
    overflow: hidden;
    overflow-y: auto;
  }
}
</style>
